<template>
  <div>
     <!-- <h1>用户下单页面</h1> -->
    <div>
    <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
 
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  style="display:flex;justify-content:center">
  <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
  <el-menu-item><img src="../img/logo.png" @click="gotoindex()"></el-menu-item>
  <el-menu-item @click="gotoindex()">首页</el-menu-item>
  <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2" ></i>购物车</el-menu-item>
  <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
  <el-menu-item index="6" @click="order">我的订单</el-menu-item>
  <el-menu-item index="7" @click="address">收货地址</el-menu-item>
  <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
  <el-menu-item index="9" @click="myShop">我的</el-menu-item>
</el-menu>
</div>
    <form class="order-container" id="form1">

      <div class="order-item" style="position: relative;margin-top: 24px;">
        <h3 class="order-item-hd">收货人地址</h3>

        <div class="order-item-content">
          <div class="order-item-li">
            <label class="order-item-title">收货人</label>
            <input class="order-item-input" placeholder="请输入收货人姓名" type="text"/>
          </div>
          <div class="order-item-li">
            <label class="order-item-title">手机号码</label>
            <input class="order-item-input" placeholder="请输入收货人手机号码" type="text"/>
          </div>
          <div class="order-item-li">
            <label class="order-item-title">所在地区</label>
            <select class="order-item-select">
              <option value="">河南省</option>
              <option value="">河北省</option>
              <option value="">江苏省</option>
              <option value="">湖南省</option>
            </select>
            <select class="order-item-select">
              <option value="">郑州市</option>
              <option value="">南京市</option>
              <option value="">杭州市</option>
              <option value="">长沙市</option>
            </select>
            <select class="order-item-select" style="width: 142px;">
              <option value="">金水区</option>
              <option value="">回族区</option>
              <option value="">哈哈区</option>
              <option value="">天齐区</option>
            </select>
            <!-- <span class="order-item-wrong"></span> -->
          </div>

          <div class="order-item-li">
            <label class="order-item-title">详细地址</label>
            <div class="order-item-input-box">
              <span class="order-item-addr-header">河南省郑州市金水区</span>
              <input placeholder="请输入收货人详细地址" type="text" style="padding-left: 124px;width: 222px;"/>
            </div>
          </div>
        </div>
      </div>



      <div class="order-item">
        <h3 class="order-item-hd">送达日期</h3>
        <div class="order-item-content">
          <div class="order-item-li">
            <label class="order-item-title">送达日期</label>
            <input class="order-item-input" placeholder="请输入送达日期"/>
          </div>
        </div>
      </div>

      <div class="order-item">
        <div class="order-item-hd">
          <h5>备注</h5>
        </div>
        <div class="order-item-box">
          <div class="order-item-left">
						<textarea class="order-item-left-textarea"
                      placeholder="贺卡留言：最多30字，生日牌：最多8个字，请在“贺卡留言”中标明."></textarea>
          </div>
          <div class="order-item-right"></div>
        </div>
      </div>

      <div class="order-item order-item-border-bottom order-item-line">

        <h3 class="order-item-hd">核对购物清单</h3>
        <div class="order-item-product-list">
          <div class="order-item-product-li">
            <a href="#"  target="_blank" style="display: inline-block; width: 100%; height: 100%;">
              <div class="order-item-product-pic">
                <img src="" alt=""/>
              </div>
              <div class="order-item-product-info">
                <p class="order-item-product-name">提拉米苏(约2磅)</p>
              </div>
              <span class="order-item-product-iprice" data-itemcode="5602003">198</span>
              <span class="order-item-product-count">x1</span>
            </a>
          </div>

        </div>

      </div>

      <div class="order-item-footer">
        <div class="order-item-footer-left">
          <div class="order-item-footer-send">
            <span class="send-title">配送至:</span>
          </div>
          <div class="order-item-footer-receiver">
            <span class="receiver-name">张三</span>
            <span id="receiver_tel">15919173982</span>
          </div>
        </div>
        <div class="order-item-footer-right">
          <div class="order-item-footer-price">
            共<span id="pro_count" class="pro-count">1</span>件商品，总商品金额:
            <span id="pro_price" class="pro-price">198</span>
          </div>
          <div class="order-item-footer-pay">
            应付:<span class="pay-price">198</span>
            <button class="pay-btn">提交订单</button>
          </div>
        </div>
      </div>
    </form>

  </div>

</template>


<script>
export default {
data(){
  return{
    activeIndex2:'1',
    userId:"",
  }
},
 mounted() {
    //is user
    let jsonUser= sessionStorage.getItem("user")
    console.log(jsonUser)
    if(jsonUser==''||null==jsonUser){
      this.$message.warning("请先登录")
      this.$router.push("/")
    }else {
      //json String to  json object
      let jsonObj= JSON.parse(jsonUser)
      this.userId= jsonObj.userId
    }
  },
methods:{
  gotoorder(){
      this.$router.push('/addUserOrder')
    },
    gotoindex(){
      this.$router.push('/ShopIndex')
    },
    setSize:function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
      },
      order(){this.$router.push('/UserOrder')
      },
       address(){this.$router.push('getGoodsAddress')
      },
      pay(){this.$router.push('/deposit')
      },
      car(){
        this.$router.push('/ShopCar')
      },
      dposistdetil(){
        this.$router.push('/depositDetail')
      },
      gotoGoodsDetail(){
        
        this.$router.push('/ShopIndexDetail')
      },
      addShopCar(){
        this.$router.push('/ShopCar')
      },
      myShop(){
        this.$router.push('/user')
      }
}
}
</script>

<style>
.order-main{
  background:#f3f5f7;
  padding-top: 78px;
  padding-bottom: 100px;
  border-top: 1px solid #E9ECF0;
}
.order-main .order-container{
  background: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  padding-bottom: 20px;
  width: 1200px;
  overflow: hidden;
}
.order-container .login-box{
  height: 36px;
  line-height: 36px;
  padding-left: 40px;
  background: #fff0ec;
  border-radius: 2px;
  color: #ff734c;
}
.order-container .order-item{
  position: relative;
  margin-top: 24px;
  padding: 0 40px 19px;
  border-bottom: 1px solid #e9ecf0;
  overflow: hidden;
}
.order-container .order-item-hd{
  font-size: 17px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.order-container .order-item-li{
  margin-top: 14px;
  font-size: 0;
}
.order-container .order-item-title{
  display: inline-block;
  width: 109px;
  font-size: 14px;
  font-weight: 400;
}
.order-container .order-item-input{
  width: 324px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid #d2d2d2;
  padding: 6px 12px;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.order-container .order-item-title{
  display: inline-block;
  width: 109px;
  font-size: 14px;
  font-weight: 400;
}
.order-container .order-item-title::before{
  content: '*';
  color: #ff734c;
  font-size: 13px;
  margin-right: 3px;
}
.order-container .order-item-select{
  width: 96px;
  height: 32px;
  border: 1px solid #d2d2d2;
  padding: 6px 0 6px 12px;
  margin-right: 8px;
  font-size: 13px;
}
.order-container .order-item-input-box{
  display: inline-block;
  width: 324px;
  height: 32px;
  border-radius: 2px;
  font-size: 0;
  position: relative;
}
.order-container .order-item-input-box span{
  font-size: 12px;
  position: absolute;
  top: 8px;
  left: 0;
  padding-left: 12px;
  color: #71797f;
}
.order-container .order-item-input-box input{
  width: 100%;
  height: 100%;
  letter-spacing: 0.5px;
  font-size: 12px;
}
.order-container .order-item-date{
  display: inline-block;
  height: 32px;
  line-height: 32px;
  position: relative;
}
.order-container .order-item-input{
  vertical-align: top;
  width: 200px;
  height: 100%;
  padding-left: 12px;
  font-size: 14px;
}
.order-container .order-item-left{
  display: inline-block;
  vertical-align: top;
  width: 424px;
  position: relative;
}
.order-container .order-item-left-textarea{
  width: 100%;
  height: 160px;
  padding: 16px;
  border-radius: 2px;
  border: 1px solid #d2d2d2;
  font-size: 13px;
  line-height: 20px;
  resize: none;
}
/* -- */
.order-container .order-item .order-item-line{
  margin-top: 21px;
  padding-top: 19px;
  border-top: 1px solid #E9ECF0;
}
.order-container .order-item .order-item-border-bottom{
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 10px;
}
.order-container .order-item{
  margin-top: 20px;
  padding: 0 40px 19px;
  border-bottom: 1px solid #E9ECF0;
  overflow: hidden;
}
.order-container .order-item-product-list{
  width: 100%;
  background: #f7f9fa;
  margin-top: 16px;
  padding: 8px;
}
.order-container .order-item-product-li{
  margin-bottom: 14px;
}
.order-container .order-item-product-pic{
  display: inline-block;
  vertical-align: middle;
}
.order-container .order-item-product-pic img{
  width: 66px;
  height: 72px;
}
.order-container .order-item-product-lifo{
  display: inline-block;
  margin-left: 16px;
  vertical-align: middle;
}
.order-container .order-item-product-name{
  font-size: 12px;
  margin-bottom: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-container .order-item-product-price{
  font-size: 15px;
  font-size: 600px;
}
.order-container .order-item-product-count{
  margin-left: 32px;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.order-container .order-item-footer{
  margin-top: 16px;
  padding: 0 8px;
  font-size: 0;
}
.order-container .order-item-footer-left{
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  text-align: left;
  font-size: 13px;
}
.order-container .order-item-footer-send{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-container .order-item-footer-receiver{
  margin-top: 8px;
  padding-left: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-container .order-item-footer-receiver .receiver-name{
  margin-right: 8px;
}
.order-container .order-item-footer-right{
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  text-align: right;
  font-size: 13px;
}
.order-container .order-item-footer-price{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-container .order-item-footer-price .pro-count{
  color: #ff734c;
  font-weight: 600;
}
.order-container .order-item-footer-price .pro-price{
  font-weight: 600;
}
.order-container .order-item-footer-pay{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 12px;
  font-size: 15px;
}
.order-container .order-item-footer-pay .pay-price{
  font-size: 21px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #ff734c;
}
.pay-btn{
  margin-left: 32px;
  width: 200px;
  height: 44px;
  text-align: center;
  background: #ff734c;
  /* border-radius: 27px; */
  font-size: 15px;
  color: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
}
.order-item-product-name{
  /* float: left; */
  color: #ff734c;
}
.order-item-product-pic{
  float: left;
}
.order-item-product-iprice{
  margin: 50px 100px;
  padding: 0.5px;
}
</style>